<template>
	<view class="content">
		<view>
			<u-notice-bar speed=40 color=#FF6347 :text="notice[0].notice"></u-notice-bar>
		</view>
		<u-overlay :show="show" @click="show = true">
			<view class="warp">
				<view class="rect" @tap.stop>
					<view class="item_box">
						转账100珍珠(20天)！
					</view>
					<view class="item_box">
						卡帕ID：641174--昵称：飞鸟与鱼
					</view>
					<view class="item_box">
						转账后输卡帕ID自动查询！
					</view>
					<u-code-input @change="change" @finish="finish" v-model="userId" :maxlength="6"></u-code-input>
					<u-button color="linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))" text="取消"
						@click="cancelLogin"></u-button>
				</view>
			</view>
		</u-overlay>

		<view class="win_image">
			<view class="time_class">
				{{time}}秒后杀手出现
			</view>
		</view>


		<view class="head">
			<view class="top_box_avg">
				平均
			</view>
			<!-- 每一个box -->
			<!-- "含烟", "晴天", "碧水", "听雨", "月亮" -->
			<view class="top_box2">
				{{hanyan_avg}}
			</view>
			<view class="top_box2">
				{{qingtian_avg}}
			</view>
			<view class="top_box2">
				{{bishui_avg}}
			</view>
			<view class="top_box2">
				{{tingyu_avg}}
			</view>
			<view class="top_box2">
				{{yueliang_avg}}
			</view>


		</view>
		<view class="head">
			<view class="top_box_avg">
				期数
			</view>
			<!-- 每一个box -->
			<view class="top_box2">
				含烟
			</view>
			<view class="top_box2">
				晴天
			</view>
			<view class="top_box2">
				碧水
			</view>
			<view class="top_box2">
				听雨
			</view>
			<view class="top_box2">
				月亮
			</view>
		</view>


		<view class="head" v-for="item,index in records">
			<view class="box_head">
				{{item.games}}
			</view>

			<!-- 每一个box -->
			<!-- "含烟", "晴天", "碧水", "听雨", "月亮" -->
			<view class="top_box1" :class="{kill_top_box: item.room_name==='含烟阁'}">
				{{item.room_name==='含烟阁'? "":item.hanyan_win}}
			</view>
			<view class="top_box1" :class="{kill_top_box: item.room_name==='晴天阁'}">

				{{item.room_name==='晴天阁'? "":item.qingtian_win}}
			</view>
			<view class="top_box1" :class="{kill_top_box: item.room_name==='碧水间'}">

				{{item.room_name==='碧水间'? "":item.bishui_win}}
			</view>
			<view class="top_box1" :class="{kill_top_box: item.room_name==='听雨楼'}">

				{{item.room_name==='听雨楼'? "":item.tingyu_win}}
			</view>

			<view class="top_box1" :class="{kill_top_box: item.room_name==='月亮湾'}">

				{{item.room_name==='月亮湾'? "":item.yueliang_win}}
			</view>
		</view>

	</view>
</template>

<script>
	import url from "../../js/url.js"
	export default {
		data() {
			return {
				userId: "",
				flag: false,
				show: true,
				notice: null,
				records: null,
				token: null,

				bishui_avg: 0,
				qingtian_avg: 0,
				yueliang_avg: 0,
				tingyu_avg: 0,
				hanyan_avg: 0,
				time: 0,

			}
		},
		onLoad() {
			var that = this
			this.getNotice()
			setInterval(() => {
				if (this.flag == true) {
					this.getRecordsBySize()
				}
			}, 3000)

		},
		onShow() {

			uni.connectSocket({
				url: 'ws://8.134.102.196:10100/websocket',

			});

			var that = this;
			uni.onSocketMessage(function(res) {
				if (res.data instanceof ArrayBuffer) {
					let decoder = new TextDecoder("utf-8")
					let str = decoder.decode(res.data)
					var result = JSON.parse(str);
					if (result.cmdMerge == 99) {
						var byteArray = new Uint8Array(result.data)
						let str1 = decoder.decode(byteArray)
						var result1 = JSON.parse(str1);
						var time1 = result1 - 10
						if (time1 >= 0) {
							that.time = time1
						}
					}
				}
			});

		},
		methods: {
			cancelLogin() {
				//在起始页面跳转到test.vue页面并传递参数
				uni.navigateTo({
					url: '/pages/loading/loading'
				});
			},

			change(e) {

			},
			finish(e) {
				uni.showLoading({
					title: '查询中'
				});
				//输入结束后发起请求
				this.login(e)

			},

			login(e) {
				//登录校验
				var that = this
				uni.request({
					url: 'http://' + url + '/user/login',
					data: {
						relation_info: e
					},
					method: "POST",
					success: (res) => {
						//返回token，进行保存
						uni.hideLoading()
						this.token = res.data.data
						if (res.data.code == 1) {
							try {
								uni.setStorageSync('token', res.data.data);
								uni.setStorageSync('userId', this.userId);
							} catch (e) {
								// error
							}
							this.getRecordsBySize(100)
							uni.showToast({
								title: res.data.msg,
								duration: 2000,
								success: () => {
									this.show = false
									this.flag = true
								}
							});

						}
						if (res.data.code == 0) {
							this.userId = "",
								uni.showToast({
									title: res.data.msg,
									duration: 3000,
									icon: "error"
								});
						}

					}
				});
			},
			getRecordsBySize() {
				uni.request({
					url: 'http://' + url + '/record/v3/list',
					header: {
						//自定义请求头信息
						'authentication': this.token
					},
					success: (res) => {
						this.records = res.data.data
						//业务消息
						this.message = res.data.msg
						var record_list = this.records
						var map = new Map()
						for (let i in record_list) {
							var name = record_list[i].room_name
							if (!map.has(name)) {
								map.set(name, 0)
							}
							map.set(name, map.get(name) + 1)
						}
						this.yueliang_avg = map.get("月亮湾")
						this.tingyu_avg = map.get("听雨楼")
						this.bishui_avg = map.get("碧水间")
						this.hanyan_avg = map.get("含烟阁")
						this.qingtian_avg = map.get("晴天阁")
					}
				});
			},
			getNotice() {
				//获取通知
				uni.request({
					url: 'http://' + url + '/record/notice',
					success: (res) => {
						this.notice = res.data.data
					}
				});
			}

		},


	}
</script>

<style>
	.time_class {
		margin-top: 40rpx;
		margin-right: 90rpx;
	}

	.win_image {
		display: flex;
		justify-content: center;
		align-items: center;
		color: coral;
		font-size: 32rpx;
		margin-top: 10rpx;
		width: 100%;
		height: 150rpx;
		background-image: url(@/static/time.png);
		background-size: 50%;
		background-repeat: no-repeat;
		background-position: center;
	}

	.item_box {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
		color: red;
	}

	.warp {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-wrap: wrap;
		height: 100%;
	}

	.rect {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
		border-radius: 20rpx;
		width: 550rpx;
		height: 550rpx;
		background-color: #fff;
	}

	.kill_top_box {
		border: 1rpx solid black;
		width: 10%;
		display: flex;
		justify-content: space-around;
		align-items: center;
		height: 50rpx;
		background-image: url(@/static/killer.png);
		background-size: cover;
		color: red;
		font-size: 20rpx;
	}




	.top_box_avg {
		border: 1rpx solid black;
		width: 20%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: aliceblue;
	}

	.top_box2 {
		border: 1rpx solid black;
		width: 16%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: skyblue;
	}

	.box_head {
		border: 1rpx solid black;
		width: 20%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: lightblue;
	}

	.top_box {
		border: 1rpx solid black;
		width: 16%;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100%;
		background-color: skyblue;
	}


	.top_box1 {
		border: 1rpx solid black;
		width: 16%;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100%;
		background-color: #71d5a1;
	}

	.head {
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
		justify-content: center;
		height: 70rpx;
		width: 100%;
	}

	.content {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
	}
</style>